<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="retrieve">
			<view class="forget">
				忘记密码
				<br>
				<view class="password">请重置您的登录密码</view>
			</view>
			<view class="login2"></view>
			<view class="login1"></view>
			<view class="listinput">
				<uv-text text="输入手机号码"></uv-text>
				<uv-input  border="surround"  style="padding: 3px 9px;" placeholder="请输入手机号码" v-model="userform.userPhone" ></uv-input>
			</view>
			<view class="listinput">
				<uv-text text="新登录密码"></uv-text>
				<uv-input  border="surround"  style="padding: 3px 9px;" placeholder="新登录密码" v-model="userform.password" ></uv-input>
			</view>
			<view class="listinput">
				<uv-text text="新支付密码"></uv-text>
				<uv-input  border="surround"  style="padding: 3px 9px;" placeholder="新支付密码" v-model="userform.paypassword" ></uv-input>
			</view>
			<button class="exitbtn" @click="exitClick">联系客服</button>
		</view>
	</view>
</template>

<script>
	import {retrievePass} from '@/api/user.js';
	export default{
		data(){
			return{
				navstyle: {
					title: "",
					txtColor: "#333333", 
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				userform:{
					userPhone:"",
					password:"",
					paypassword:""
				}
			}
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/user/login' 
				});
			},
			exitClick(){
				var reg_tel = /^1[3456789]\d{9}$/;
				
				if(!this.userform.userPhone){
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if(!this.userform.password){
					uni.showToast({
						icon: "none",
						title: "请输入新登录密码"
					})
					return
				}
				if(!this.userform.paypassword){
					uni.showToast({
						icon: "none",
						title: "请输入新支付密码"
					})
					return
				}
				retrievePass(userform).then(res=>{
					if(res.code == 1){
						uni.showToast({
							icon: "none",
							title: res.msg
						})
						setTimeout(()=>{
							uni.navigateTo({
							  url: '/pages/user/login'
							});
						})
					}
				})
			}
		}
	}
</script>

<style>
	.uv-input{
		padding: 3px 9px !important;
	}
	.retrieve{
	    display: flex;
	    flex-direction: column;
	    font-size: 14px;
	    color: #333;
	}
	.forget{
	    padding: 5px 5%;
	    font-size: 21px;
	    font-weight: 700;
	    color: #585858;
	    line-height: 26px;
	    width: 90%;
	}
	.password{
	    font-size: 14px;
	    color: #969696;
	    font-weight: 500;
	}
	.login2{
	    width: 107px;
	    height: 132px;
	    position: fixed;
	    top: 0;
	    right: 0;
	    background-image: url(/static/img/user/login_bg_2.png);
	    background-size: 100% 100%;
	    background-repeat: no-repeat;
	    overflow: hidden;
	    z-index: 9999;
	}
	.login1{
	    width: 65px;
	    height: 66px;
	    position: fixed;
	    bottom: -4px;
	    left: 0;
	    background-image: url(/static/img/user/login_bg_1.png);
	    background-size: 100% 100%;
	    background-repeat: no-repeat;
	    overflow: hidden;
	    z-index: 9999;
	}
	.listinput{
	    padding: 5px 5%;
	    font-size: 14px;
	    color: #585858;
	    line-height: 42px;
	}
	.exitbtn{
	    width: 80%;
	    border-radius: 50px;
	    background: linear-gradient(135deg, #d66c6b, #ed6266);
	    font-size: 14px;
	    margin: 32px auto 0 auto;
	    color: #fff;
	    padding: 3px 0;
	}
</style>